<script setup lang="ts">import { ref } from 'vue';

// typescript
const test = ref(1);
</script>

<!-- 购物车商品卡片 -->
<template>
  <view class="w-components-container w-commodity-cart-item">
    <view class="thumb-view">
      <image src="../../static/images/delete/3.png"></image>
    </view>
    <view class="info-view">
      <view class="title ellipsis-2">Vivo Xplay 6Vivo Xplay 6Vivo Xplay 6Vivo Xplay 6Vivo Xplay 6Vivo Xplay 6Vivo Xplay 6</view>
      <view>
        <view class="tag">藏蓝色 256G内存</view>
        <view class="price-view">
          <view class="price">
            <text>￥</text>
            <text>1000.00</text>
          </view>
          <view class="number-view">
            <uni-number-box v-model="test" />
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
// scss
.w-commodity-cart-item {
  background-color: #fff;
  display: flex;
  padding: 40rpx 0;
}

.thumb-view {
  width: 176rpx;
  height: 176rpx;

  image {
    width: 176rpx;
    height: 176rpx;
  }
}

.info-view {
  height: 176rpx;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .title {
    font-size: 28rpx;
    color: $text-color;
  }

  .tag {
    display: inline-block;
    background-color: $border-color;
    padding:0 10rpx;
    font-size: 24rpx;
    color: #999;
  }

  .price-view {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .price {
      text {
        font-size: 28rpx;
        color: $amount-color;

        &:first-child {
          font-size: 24rpx;
        }
      }
    }
  }
}
</style>